<template>
  <view class="interestActivity">
    <head-box @send="getheadH" ref="box"></head-box>
    <view class="pos" ref="operationRef">
      <view class="nav">
        <classification
          :currentTab="active"
          :navList="isNavList"
          @click="onTabClick"
        ></classification>
      </view>
      <view class="lng">
        <view class="l" @click="onDictSelectShow">
          <image src="../../static/add/c.png" class="c"></image>
          <text>{{ address }}</text>
          <image src="../../static/img/drop-down.png" class="d"></image>
        </view>
        <selectTab :list="tabList" @select="onSelectTabIndex"></selectTab>
      </view>
      <vueSearch @confirm="onSearchBlur" type="b"></vueSearch>
    </view>
    <view class="content tab-botton" v-if="list.length">
      <block v-for="(item, index) in list" :key="index">
        <view class="item" @click="onEventDetails(item)">
          <image
            class="avat"
            :src="item.movePic ? $api.getImgUrl(item.movePic) : '/static/img/null.png'"
            mode="aspectFill"
          ></image>
          <view class="h1"> {{ item.moveTitle }} </view>
          <view class="h2">
            <view class="a">
              <image src="../../static/add/d.png"></image>
              <text class="aa" v-if="item.activityCategory === 1 || item.activityCategory === 3"
                >{{ item.startTime }}-{{ item.endTime }}</text
              >
              <text class="aa" v-if="item.activityCategory === 2"
                >{{ item.datestartTime }}-{{ item.dateendTime }}</text
              >
            </view>
          </view>
          <view class="h3" v-if="item.activityCategory==2">
            <image  v-if="item.sendType !==1"src="../../static/add/a.png"></image>
            <text  v-if="item.sendType !==1">{{ item.moveAddr }}</text>
          </view>
          <view class="h3" v-else>
            <image src="../../static/add/a.png"></image>
            <text>{{ item.moveAddr }}</text>
          </view>
          <view class="h2" v-if="item.activityCategory==2">
            <view class="a"  v-if="item.sendType !==1">
              <image src="../../static/add/b.png"></image>
              <view class="a1"> <text>距我</text>{{ longitudeLatitude[index] }}</view>
            </view>
          </view>
          <view class="h2" v-else>
            <view class="a">
              <image src="../../static/add/b.png"></image>
              <view class="a1"> <text>距我</text>{{ longitudeLatitude[index] }}</view>
            </view>
          </view>
          <view class="h4">
            <view class="l">
              <view class="btn-1">
                <text>{{
                  item.faceTarget === '1' ? '个人' : item.faceTarget === '2' ? '团体' : '个人/团体'
                }}</text>
              </view>
              <view
                v-if="active === 8"
                class="btn-2"
                :class="[
                  isWhetherToEnd[index].start === -1
                    ? 'status1'
                    : isWhetherToEnd[index].start === 1
                    ? 'status2'
                    : 'status3',
                ]"
              >
                <text>{{ isWhetherToEnd[index].value }}</text>
              </view>
              <!-- @2U 可能会存在bug -->
              <!-- <view v-else class="btn-2" :class="'status' + item.dateStatus"> -->
              <view v-else class="btn-2" :class="moveStatus[index].cls">
                <!-- <text>{{
                    moveStatus[index]
                  }}</text> -->
                <text v-if="item.activityCategory === 2">{{ moveStatus[index].name }}</text>
                <text v-else>{{ moveStatus[index].name }}</text>
              </view>
            </view>
            <view class="r">
              <view class="views" style="background-image: url(../../static/add/e.png)">
                <text>{{
                  item.moveStatus === '1' || item.moveStatus === '2' ? '点我报名' : '查看详情'
                }}</text>
              </view>
            </view>
          </view>
        </view>
      </block>
      <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore" />
    </view>
    <u-empty
      margin-top="310"
      mode="list"
      v-if="!list.length && status === 'nomore'"
      :text="tabEmpytValue"
    ></u-empty>
    <tabs-box></tabs-box>
    <selectAddress
      @confirm="onSelectDictActionSheet"
      ref="address"
    ></selectAddress>
  </view>
</template>

<script>
import classification from '@/components/classification'
import {
  getdateStatus,
  getdateStatus8,
  getLongitudeLatitude,
  statusIsTimestampDuration,
  onEventDetails,
  getWelfareStatus,
  getOrganizationalStatus,
  getGroupsCategoryList
} from '@/common/type'
import { getMoveSearchList } from '@/api/move'
import vueSearch from '@/components/search'
import selectTab from '@/components/tabs/tab'
import selectAddress from '@/components/selectAddress/selectAddress'
import { type1 } from '@/mixins/type-1'
import {getMoveTypeRefresh,gpMoveTypeList} from '@/api/home-type'
export default {
  mixins: [type1],
  data() {
    return {
      toph: '0rpx', //高度
      dictShow: false, //是否要查看地区编码
      address: '全部城区', //默认为上城区
      addressCode: '',
      tabList: [
        //小导航数据
        { name: '推荐', index: 1 },
        { name: '最新', index: 2 },
        { name: '最近', index: 3 },
      ],
      list: [], //活动数据
      //默认的小tab选中
      selectTabIndex: 0,
      //默认是那一个
      active: 0,
      activeString: false,
      tabEmpytValue: ``, //展示为空时候
      //搜索内容
      search: '',
      pageNo: 1, //第几页
      lat: 29.59, //默认北京定位 经度
      lng: 119.05, //维度
      status: 'loadmore', //加载的状态
      iconType: 'flower', //加载图标样式
      isLoading: false, //是否要加载数据
      isType: '99', //判断是那个索引
      actives: -2,
    }
  },
  components: {
    classification,
    vueSearch,
    selectTab,
    selectAddress,
  },
  computed: {
    isNavList() {
      const p = []
      this.navList.map((item) => {
        if (item.type !== '19') {
          p.push(item)
        }
      })
      return p
    },
    //是否可以开启活动
    isWhetherToEnd() {
      return this.list.map((item) => {
        const { datestartTime, dateendTime } = item
        return statusIsTimestampDuration({ datestartTime, dateendTime })
      })
    },
    //福利活动状态
    moveStatus8() {
      return this.list.map((item) => {
        return getdateStatus8(item.dateStatus)
      })
    },
    //福利活动状态
    moveStatus() {
      return this.list.map((item) => {
        // 区分开 福利活动, 组织活动 和 其他活动
        const { activityCategory, dateStatus, moveJoinNum, moveNum } = item
        const isFullPeople = moveJoinNum >= moveNum && moveNum > 0 //判断是否 报名人数>总人数

        if (activityCategory === 2) {
          return getWelfareStatus(dateStatus, isFullPeople)
        } else if (activityCategory == 1) {
          return getOrganizationalStatus(dateStatus, isFullPeople)
        }
        return getdateStatus(dateStatus)
      })
    },
    //获取距离定位
    //距离我这边多少路
    longitudeLatitude() {
      return getLongitudeLatitude(this.list)
    },
    //判断活动状态
    isDateStatus() {
      if (this.active === '8') {
        const list = this.details?.list
        let data = {}
        list.map((item) => {
          const { dateStatus } = item
          if (dateStatus === 1) {
            data = {
              value: '未开始',
              status: dateStatus,
            }
          }
          if (dateStatus === 2) {
            data = {
              value: '活动进行中',
              status: dateStatus,
            }
          }
          if (dateStatus === 3) {
            data = {
              value: '活动已结束',
              status: dateStatus,
            }
          }
          if (dateStatus === 4) {
            data = {
              value: '活动未开始',
              status: dateStatus,
            }
          }
          if (dateStatus === 5) {
            data = {
              value: '活动已截止',
              status: dateStatus,
            }
          }
        })

        return data
      }
    },
  },
  onLoad(options) {

    this.isType = options.type
    this.getMoveTypeRefresh()
    if(options.type){
      this.isType = options.type
    }
    if (options.index === '0') {
      this.active = 0
    } else {
      const active = this.navList.findIndex(item=>item.type ===this.isType)
      this.active = active
    }

  },
  onShow() {
    // #ifdef H5
    this.$wxSetShare()
    // #endif
  },
  mounted() {
    this.lng = uni.getStorageSync('lng')
    this.lat = uni.getStorageSync('lat')

    this.tabEmpytValue = `列表为空`
  },
  methods: {
    //首页分类-获取
    getMoveTypeRefresh(){
      const token = uni.getStorageSync('token')
      if (token) {
        getMoveTypeRefresh().then(res=>{
          const {code,result} = res
          if(result.length || result!=='' || result.length>0){
            this.resultInterestActivityList(result)
          }  else {
            this.gpMoveTypeList()
          }

        })
      } else {
        this.gpMoveTypeList()
      }

    },
    //首页分类-分页列表查询不用登录
    gpMoveTypeList(){
      gpMoveTypeList({pageSize:999}).then((res) => {
        const { result : { records : result } } = res
        this.resultInterestActivityList(result)
      })
    },
    //活动集市
    resultInterestActivityList(result){
      const list = getGroupsCategoryList(result)
      let ls = []
      const abcList = list[0].navList;
      abcList.map(item=>{
        ls.push({
          cate_name:item.name,
          icon:this.$imageUrl+item.icon,
          isShow:true,
          moveType:item.url?item.url.split('type=')[1]:0,
          type:item.url?item.url.split('type=')[1]:0,
        })
      })
      ls.push( { cate_name: '历史活动', moveType: 99,type:'99',isShow:true })
      this.navList = ls
      const index = this.navList.findIndex(item=>{
        return item.type===this.isType
      })
      this.active = this.isType?index:0

      this.copyRest()
      this.getMoveSearchListType()
    },
    //动态高度
    getheadH(e) {
      this.toph = e
    },
    //活动详情
    onEventDetails({ id, activityCategory }) {
      return onEventDetails({ id, activityCategory })
    },
    //	点击ActionSheet列表项时触发
    async onSelectDictActionSheet(data) {
      this.copyAddressCode(data)
      this.copyRest()
      await this.getMoveSearchListType()
      this.$refs.address.show = false
    },
    //地区处理了
    copyAddressCode(data) {
      const { label, value } = data
      this.address = label
      this.addressCode = value
    },
    //可复用
    async getMoveSearchListType() {
      if(!this.isNavList.length){
        this.gpMoveTypeList()
      }
      else {
        await this.getMoveSearchList({
          lat: this.lat,
          lng: this.lng,
          addressCode: this.addressCode,
          moveType: `${this.isNavList[this.active].moveType}`,
          search: this.search,
        })
      }
    },
    //点击那一个条件
    async onSelectTabIndex(index, b) {
      this.selectTabIndex = b
      this.copyRest()
      await this.getMoveSearchListType()
    },
    //打开了地区编号选择
    async onDictSelectShow() {
      this.$refs.address.show = true
    },
    //活动-分页列表查询
    async getMoveSearchList(data) {
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      this.status = 'loading'
      const params = {
        lat: data.lat, ///经度
        lng: data.lng, //维度
        moveAreaCode: data.addressCode, //编码
        flag: '', //不传，返回全部，4 预约前，1.可预约，5.不可预约，2.进行中，3.已结束
        moveTitle: data.search, //搜索内容
        pageNo: this.pageNo, //第几页
        sortType: this.selectTabIndex + 1, //1推荐，2最新，3最近
        pageSize: 10, //当前条数
        moveType: `${data.moveType}`,
      }
      uni.showLoading({
        title: '活动列表加载中...',
      })
      const {
        code,
        result: { records: list, total },
      } = await getMoveSearchList(params)
      if (code === 200) {
        this.isLoading = false
        uni.hideLoading()
        if (!list.length) {
          this.status = 'nomore'
        } else {
          this.status = 'loadmore'
          this.list = [...this.list, ...list]
          if (this.list.length >= total) {
            this.status = 'nomore'
          }
        }
      } else {
        this.status = 'nomore'
        uni.hideLoading()
      }
    },
    async loadmore() {
      // 每次出发该方法，都要使页数加一
      this.pageNo++
      await this.getMoveSearchListType()
    },
    //重置数据
    copyRest() {
      this.list = []
      this.status = 'loadmore' //加载的状态
      this.iconType = 'flower' //加载图标样式
      this.isLoading = false //是否要加载数据
      this.pageNo = 1
    },
    //点击分类
    async onTabClick(index) {
      this.search = ''
      this.active = index
      if (!this.isNavList[this.active].moveType) {
        this.isNavList[this.active].moveType = this.isNavList[this.active].type
      }

      if (this.isNavList[this.active].type === '19') {
        this.active = 0
        uni.navigateTo({
          url: '/pages/westlakePioneer/westlakePioneer',
        })
      }
      this.copyRest()
      await this.getMoveSearchListType()
      this.tabEmpytValue = `${this.isNavList[this.active].cate_name}列表为空`
    },
    async onSearchValue() {
      this.copyRest()
      await this.getMoveSearchListType()
    },
    //搜索
    async onSearchBlur(v) {
      this.search = v
      this.isNavList[this.active].moveType = this.isNavList[this.active].moveType === 99 ? 99 : ''
      await this.onSearchValue()
    },
  },
  //加载到底部进行请求新的数据
  onReachBottom() {
    if (this.status === 'loadmore') {
      this.loadmore()
    }
  },
}
</script>

<style lang="scss" scoped>
.interestActivity {
  .pos {
    .nav {
      height: 95rpx;
      padding: 0 30rpx 0 29rpx;
    }
    .lng {
      background-color: #f5f5f5;
      justify-content: space-between;
      height: 94rpx;
      padding: 0 28rpx;
      display: flex;
      align-items: center;
      .l {
        display: flex;
        align-items: center;
        width: auto;
        .c {
          width: 27rpx;
          height: 27rpx;
        }
        text {
          width: auto;
          font-size: 28rpx;
          font-family: PingFang;
          font-weight: 500;
          color: #222222;
          white-space: nowrap;
          padding: 0 13rpx 0 12rpx;
        }
        .d {
          width: 22rpx;
          height: 12rpx;
        }
      }
    }
  }

  .content {
    padding-top: 24rpx;
    .item {
      padding: 0 20rpx 46rpx 20rpx;
      .avat {
        height: 298rpx;
        width: 100%;
        border-radius: 15upx;
      }
      .h1 {
        font-size: 30rpx;
        font-family: PingFang;
        font-weight: 500;
        color: #222222;
        line-height: 44rpx;
        padding: 32rpx 0 18rpx 23rpx;
      }
      .h2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 23rpx;
        .a {
          &:first-child {
            font-size: 18rpx;
            font-family: PingFang;
            font-weight: 400;
            color: #666666;
            line-height: 44rpx;
          }
          &:last-child {
            display: flex;
            align-items: center;
          }
          .aa {
            padding-left: 21rpx;
            font-size: 26rpx;
          }

          image {
            width: 20rpx;
            height: 24rpx;
          }
          .a1 {
            padding-left: 12rpx;
            white-space: nowrap;
            font-size: 20rpx;
            font-family: PingFang;
            font-weight: 400;
            color: #3389ed;
            line-height: 44rpx;
            text {
              width: 39upx;
              height: 19upx;
              font-size: 20upx;
              font-family: PingFang;
              font-weight: 400;
              color: #3389ed;
              line-height: 44upx;
            }
          }
        }
      }
      .h3 {
        padding: 13rpx 0 0 23rpx;
        image {
          width: 20rpx;
          height: 24rpx;
        }
        text {
          width: 395rpx;
          height: 18rpx;
          font-size: 26rpx;
          font-family: PingFang;
          font-weight: 400;
          color: #666666;
          line-height: 44rpx;
          padding-left: 21rpx;
        }
      }
      .h4 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 23rpx;
        padding-top: 10rpx;
        .l {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .btn-1 {
            width: auto;
            border: 1rpx solid #3389ed;
            border-radius: 14rpx;
            line-height: 18rpx;
            padding: 8rpx;
            text {
              text-align: center;
              width: 100%;
              display: block;
              font-size: 24rpx;
              font-family: PingFang;
              font-weight: 400;
              color: #3389ed;
            }
          }
          .status1,
          .status2,
          .status3,
          .status4,
          .status5 {
            width: auto;
            border-radius: 14rpx;
            margin-left: 50rpx;
            line-height: 18rpx;
            padding: 8rpx;
            text {
              text-align: center;
              width: 100%;
              display: block;
              font-size: 18rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #ffffff;
            }
          }
        }
        .r {
          width: auto;
          text-align: center;
          .views {
            width: 100%;
            height: 47rpx;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text {
              width: 71rpx;
              height: 17rpx;
              font-size: 28rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #fefefe;
              line-height: 29rpx;
              padding: 13rpx 22rpx 17rpx 20rpx;
            }
          }
        }
      }
    }
  }
}
.status1 {
  background: $status3f8fee;
  border: transparent;
}
.status2 {
  background: $statusffa800;
  border: 1px solid $statusffa800;
}
.status3 {
  background: $statusecff700;
  border: transparent;
}
.status4 {
  background: $statusec8B008B;
  border: transparent;
}
.status5 {
  background: $statusecff700;
  border: transparent;
}
</style>
